import Form, { WrappedFormUtils } from "antd/lib/form/Form";
import React, { useState } from "react";
import { RouteComponentProps } from "react-router";
import { IForm, submitAction } from "./registe";
import View from "./view";

interface IProps extends RouteComponentProps {
  loginAction: (param: IForm) => void;
  form: WrappedFormUtils;
}

// 复合类型,包含了Route对象

const Login: React.FC<IProps> = props => {
  const { form } = props;
  console.log("login,props", props);

  const [loading, setLoading] = useState<boolean>(false);

  // 提交函数
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault(); //阻止跳转
    form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
        const formData: IForm = {
          username: values.username,
          password: values.password,
          verifyCode: values.verifyCode
        };
        // 传入History对象
        submitAction(formData, props.history, setLoading, () => {});
      }
    });
  };

  return <View form={form} handleSubmit={handleSubmit} loading={loading} />;
};

export default Form.create({ name: "LoginPage" })(Login);
